<template>
	<view class="content">

		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->
		<image src="../../static/注册页面.jpeg" class="img"></image>
		<view class="login_from">
			<view class="img_avatar">
				<u-avatar :src="location" size="large" @click="updateImg">
				</u-avatar>
				<view>请上传头像</view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/user.png"></image>
				<view class="login_from_name">用户名</view>
				<view class="login_from_fun"><input class="uni-input" type="text" placeholder="请输入用户名" maxlength="10"
						v-model="username" /></view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/password.png"></image>
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input class="uni-input" password type="text" placeholder="请输入密码"
						maxlength="10" v-model="password" /></view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/nickname.png"></image>
				<view class="login_from_name">昵称</view>
				<view class="login_from_fun"><input class="uni-input" type="nickname" placeholder="请输入昵称" maxlength="10"
						v-model="nickname" /></view>
			</view>

			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/sex.png"></image>
				<view class="login_from_name">性别</view>
				<view class="login_from_fun">
					<u-radio-group v-model="sexvalue" @change="radioGroupChange">
						<u-radio @change="radioChange" v-for="(item, index) in sex" :key="index" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="login_from_input">
				<image src="https://chenxiaotian.oss-cn-hangzhou.aliyuncs.com/icon/static/img/building.png"></image>
				<view class="login_from_name">楼栋</view>
				<view class="login_from_fun">
					<u-input v-model="value" :type="type" :border="border" @click="loadData" />
					<u-select v-model="show" mode="mutil-column-auto" :list="buildlist" @confirm="confirm"></u-select>
				</view>
			</view>


		</view>

		<view class="login_from_dl">
			<button @click="zhuce">注册</button>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
		<view class="logo_xieyi">
			<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
			<view class="logo_text">请勾选并阅读<text>《注册协议》</text>及<text>《隐私协议》</text></view>
		</view>

	</view>

	</view>
</template>

<script>
	import {
		vShow
	} from "vue";

	export default {
		data() {
			return {
				location: '',
				sexvalue: '',
				value: '',
				type: 'select',
				show: false,
				border: false,
				sex: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},
					{
						name: '保密',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				sexvalue: 'orange',
				buildlist: [{
						value: 1,
						label: '如新小镇一单元',
						children: [{
								value: 1,
								label: '1_101',
							},
							{
								value: 2,
								label: '1_102',
							}
						]
					},
					{
						value: 2,
						label: '如新小镇一单元',
						children: [{
							value: 1,
							label: '1_102',

						}]
					}
				],

				username: '',
				password: '',
				telphone: '',
				nickname: '',
				build: '',
				room: '',
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				usersex: ''
			}
		},

		onLoad() {

		},
		computed: {
			getimgUrl() {
				return this.src
			}
		},
		methods: {
			updateImg() {
				uni.chooseImage({
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						console.log('成功', chooseImageRes);
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'http://localhost:9002/api/file/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								platform: 2,
								type: 1,

							},
							formData: {
								category: 3,
							},
							success: res => {
								if (JSON.parse(res.data).code == "200") {
									this.location = JSON.parse(res.data).data;
									// 更新当前页面数据
									this.$refs.uToast.show({
										title: '上传成功',
										type: 'success',
									})
								}
								// 失败报错
								if (JSON.parse(res.data).code == "500") {
									this.$refs.uToast.show({
										title: '上传失败',
										type: 'failed',
									})
								}

							}
						});
					},
					fail: err => {
						this.$refs.uToast.show({
							title: '上传失败',
							type: 'failed',
						})
					}
				});
			},
			async loadData() {
				const res = await uni.$http.get('building/getAll');
				if (res.data.code == 200) {
					this.buildlist = res.data.data;
					this.show = true;
				} else {
					wx.showToast({
						icon: 'none',
						title: "数据加载失败"
					})
				}

			},
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				if (e == '男') {
					this.usersex = 0;
				} else if (e = '女') {
					this.usersex = 1;
				} else if (e = '保密') {
					this.usersex = 2;
				}
			},
			confirm(e) {
				var s = '';
				for (let i = 0; i < e.length; i++) {
					if (i < e.length - 1) {
						s += e[i].label + ' ';
					} else if (i = e.length - 1) {
						s += e[i].label;
					}
				}
				this.value = s;
				this.build = e[0].value;
				this.room = e[1].value;

			},
			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},

			async zhuce() {
				if (this.gouxSta == false) {
					uni.showToast({
						"title": "请阅读并勾选用户协议",
						"icon": 'none'
					})
				} else if (this.username.length == 0 || this.password.length == 0) {
					wx.showToast({ //弹框提示
						icon: 'none',
						title: '登录账号或密码不能为空!',
						duration: 2000,
					})
				} else {
					let params = {
						username: this.username,
						password: this.password,
						nickname: this.nickname,
						build: this.build,
						room: this.room,
						usersex: this.usersex,
						userAvatar:this.location
					};
					const res = await uni.$http.post('register', params);
					if (res.data.code == "200") {
						this.$refs.uToast.show({
							title: '注册成功,前往登录',
							type: 'success',
							url: '/pages/login/login'
						})

					} else {
						this.$refs.uToast.show({
							title: '注册失败,用户名存在',
							type: 'failed',
						})
					}


				}
			},

			// 所属地区选择 end
		}
	}
</script>

<style lang="scss">
	.img_avatar {
		margin-left: 270rpx;
		margin-top: 50rpx;
	}

	.img {
		width: 100%;
		height: 350rpx;
	}

	page {
		background: #fff;
	}

	.login_from_input image {
		margin-top: 5rpx;
		margin-left: 30rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 50rpx 8%;
		align-items: center;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 70%;
		text-align: left;
		font-size: 27rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 200rpx;
		line-height: 200rpx;
		margin-top: 80rpx;
	}

	.login_from_dl button {
		width: 80%;
		height: 50px;
		line-height: 50px;
		background: #FF3B00;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.eye {
		margin-top: 5rpx;
		width: 55rpx;
		height: 55rpx;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
